<template>
  <div>
    <button class="startBtn" @click="startLottery" :disabled="isRolling">抽奖</button>
    <button v-if="isRolling" class="stopBtn" @click="stopLottery">停止</button>

    <!-- 扑克牌轮动区域 -->
    <div class="card-container" :style="{width: totalWidth, left: left + 'px'}">
      <div
          v-for="(card, index) in cards"
          :key="index"
          :class="['card', { active: index === activeCardIndex }]"
          @click="flipCard"
      >
        <div class="card-face card-front"></div>
        <div class="card-face card-back">
          <div class="result">{{ card.content }}</div>
        </div>
      </div>
    </div>

    <div class="confirm-result">
      <a-button @click="confirmResult">确认中奖</a-button>
    </div>

    <!-- 候选人列表 -->
    <div class="participants">
      <div class="participants-title">候选人</div>
      <div class="participants-list">
        <span v-for="participant in participants" :key="participant" class="participants-item">
          {{ participant }}
        </span>
      </div>
    </div>

    <!-- 中奖结果 -->
    <div class="results">
      <div class="results-title">中奖结果</div>
      <div class="results-list">
        <div v-for="result in results" :key="result" class="results-item">
          {{ result.prize }} ———— {{ result.winner }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useStore } from '../store/store.js';
import {message} from "ant-design-vue";

const store = useStore();
const participants = computed(() => {
  const nowGroup = store.nowGroup;
  const t = store.group.find(v => v.groupName === nowGroup);
  if(t && t.members) {
    return t.members
  }
  return []
});
const cards = ref([]); // 扑克牌列表
const activeCardIndex = ref(0); // 当前活动的扑克牌索引
const isRolling = ref(false); // 是否正在轮动
const winner = ref(''); // 中奖者
const intervalId = ref(null); // 轮动定时器
const left = ref(0)
const totalWidth = ref('auto')
const results = computed(() => store.results)
const nowPrize = computed(() => store.nowPrize)

// 初始化扑克牌
const initializeCards = () => {
  cards.value = participants.value.map((participant) => ({
    content: participant,
  }));
  totalWidth.value = cards.value.length * 200 + 'px'
};

// 开始抽奖
const startLottery = () => {
  if(!nowPrize.value) {
    message.error('请先选择奖品')
    return
  }
  if (isRolling.value) return;
  left.value = screenLeft
  isRolling.value = true;
  winner.value = '';
  // 全部翻回去
  const filppedCard = document.querySelectorAll('.card.flipped');
  filppedCard.forEach(card => {
    card.classList.remove('flipped');
  });
  initializeCards();
  startRolling();
};

// 开始轮动
const startRolling = () => {
  intervalId.value = setInterval(() => {
    // activeCardIndex.value = (activeCardIndex.value + 1) % cards.value.length;
    left.value = left.value - 10
    if(left.value < cards.value.length * -200) {
      left.value = window.screenLeft
    }
  }, 10); // 每 100ms 切换一张牌
};

// 停止抽奖
const stopLottery = () => {
  clearInterval(intervalId.value);
  isRolling.value = false;
  const randomIndex = Math.floor(Math.random() * participants.value.length);
  winner.value = participants.value[randomIndex];
  cards.value = [{ content: winner.value }]; // 只保留一张牌
  activeCardIndex.value = 0;
  left.value = 0
  totalWidth.value = 'auto'
};

// 翻转卡片
const flipCard = () => {
  if (!isRolling.value) {
    const card = document.querySelector('.card.active');
    if (card) {
      card.classList.toggle('flipped');
    }
  }
};

// 确认结果
const confirmResult = () => {
  if(!winner.value) {
    message.warn('请先抽奖')
    return
  }
  store.confirmPrize(winner.value)
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (intervalId.value) {
    clearInterval(intervalId.value);
  }
});
</script>

<style scoped>
/* 卡片容器 */
.card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 200px;
  overflow: hidden;
  position: relative;
}

.confirm-result {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* 卡片样式 */
.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  cursor: pointer;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 16px;
  background-color: #f9f9f9;
}

.card-front {
  background-image: url("/poke-back.png");
  background-position: center;
  background-size: 100% 100%;
}

.card-back {
  transform: rotateY(180deg);
  background-image: url("/poke-front.png");
  background-position: center;
  background-size: 100% 100%;
}

.card-back .result {
  z-index: 100;
  font-size: 30px;
  font-weight: bold;
  color: #fb8802;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #fff;
}

/* 抽奖按钮样式 */
.startBtn {
  position: relative;
  margin-bottom: 20px;
  z-index: 10;
}

/* 停止按钮样式 */
.stopBtn {
  position: relative;
  margin-bottom: 20px;
  z-index: 10;
}

/* 候选人列表 */
.participants {
  position: absolute;
  top: 50px;
  color: #cccccc;
}

.participants-list {
  max-width: 370px;
  background-color: #d8d8d8;
  padding: 8px;
  color: #333333;
}

.participants-item {
  margin-right: 10px;
}

.results {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #9c9a9a;
  padding: 5px 8px;
  border-radius: 6px;
  color: #e9ad6f;
  .results-title {
    font-size: 20px;
    font-weight: bold;
  }
  .results-list {
  }
}
</style>
